<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>原生JS图片轮播</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{

        }
        .wrap{
            width:500px;
            height:300px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        .tabcont{
            width:0;
            height:300px;
            position: absolute;
            left: 0px;
            top:0px;
        }
        .tabcont li{
            width:500px;
            height:300px;
            float: left;
        }
        .prev,.next{
            display: block;
            font-weight: bold;
            font-size: 40px;
            height: 80px;
            line-height: 80px;
            position: absolute;
            top:50%;
            margin-top: -40px;
            color: #fff;
            background-color: #000;
            opacity: 0.6;
            filter: alpha(opacity=60);
            z-index: 1;
            text-decoration: none;
        }
        .prev{
            left: 0;
        }
        .next{
            right: 0;
        }
    </style>
</head>
<body>
<div class="wrap">
    <a href="javascript:;" id="j_prev" class="prev">&lt;</a>
    <a href="javascript:;" id="j_next" class="next">&gt;</a>
    <ul id="j_tabcont" class="tabcont">
        <li><img src="http://images.17173.com/2015/news/2015/11/04/mj1104ba04s.jpg" alt="" /></li>
        <li><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1159239045,3565331838&fm=27&gp=0.jpg" alt="" /></li>
        <li><img src="http://dl.bbs.9game.cn/attachments/forum/201503/20/111449w8zz945qrzvvb5dv.jpg" alt="" /></li>
        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505986915932&di=5b88406bc4aa171d4429f492633bd902&imgtype=0&src=http%3A%2F%2Fcityimg.toptour.cn%2Fuploadfile%2F201206%2F151042501854.jpg" alt="" /></li>
    </ul>
</div>

<script type="text/javascript">

    window.onload=function(){
        var oPrev = document.getElementById("j_prev");
        var oNext = document.getElementById("j_next");
        var oUl = document.getElementById("j_tabcont");
        var oLl = oUl.getElementsByTagName("li");
        var arrImg = oUl.getElementsByTagName("img");
        var newLeft = 0;

        setInterval(function(){
             fnTab(500,"left");
        },2000);
        oNext.onclick = function(){
            fnTab(500,"left");
        };
        oPrev.onclick = function(){
            fnTab(-500,"left");
        };
        function fnTab(offset,dir){
            clearInterval(timer);
            var arr = [];
            var num = 0;
            var timer = null;
            oUl.style.width =  oLl.length * parseInt(getStyle(oLl[0],'width'))+'px';

            //循环添加数组的值
            if(offset>0){
                for(var i=0;i<=offset;i+=100){
                    arr.push(i);
                }
            }else{
                for(var i=0;i>=offset;i-=100){
                    arr.push(i);
                }
            }

            timer = setInterval(function(){
                oUl.style[dir] = newLeft-arr[num]+"px";
                num++;
                if(num == arr.length){
                    newLeft = parseInt(getStyle(oUl,dir));
                    clearInterval(timer);
                }
            },100);

            //判断是否是最后一张，则跳到第一张图
           var len = -(oLl.length-1)*parseInt(getStyle(oLl[0],'width'));

            if(newLeft==len && offset>0){
                clearInterval(timer);
                timer = setInterval(function(){
                    oUl.style[dir] = newLeft+"px";
                    newLeft +=100;
                    if(parseInt(getStyle(oUl,dir)) == 0){
                        newLeft = 0;
                        clearInterval(timer);
                    }

                },100);

            }

            //判断是否是第一张，则跳到最后一张图
            if(newLeft==0 && offset<0){
                clearInterval(timer);
                timer = setInterval(function(){
                    oUl.style[dir] = newLeft+"px";
                    newLeft -=100;
                    if(parseInt(getStyle(oUl,dir)) == len){
                        newLeft = len;
                        clearInterval(timer);
                    }


                },100);
            }

            //console.log(newLeft+"..."+oUl.style[dir]); newLeft = parseInt(getStyle(oUl,dir));
            //给UL一个新的相对位置的值
//           var newLeft = parseInt(getStyle(oUl,dir))+offset;
//            oUl.style[dir] = newLeft+"px";
//            //判断是否是最后一张，则跳到第一张图
//            if(newLeft<-1000){
//            oUl.style[dir] = 0+"px";
//            }
//            //判断是否是第一张，则跳到最后一张图
//            if(newLeft>0){
//
//            oUl.style[dir] = -1000+"px";
//            }



        }
        //判断浏览器，实现获取样式表样式属性的兼容
        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        }
    }
</script>
</body>

</html>
